import type { Directive } from 'vue';

interface ElType extends HTMLElement {
  $oldStyle: CSSStyleDeclaration;
  $fullStyle: CSSStyleDeclaration;
}

const vFull: Directive = {
  mounted: (el: ElType, binding) => {
    el.$oldStyle = { ...el.style };
    if (binding.arg === 'screen') {
      el.$fullStyle = {
        ...el.style,
        left: '0',
        top: '0',
        zIndex: '8',
        position: 'fixed',
        height: '100vh',
        width: '100vw'
      };
    } else {
      el.$fullStyle = {
        ...el.style,
        left: '0',
        top: '0',
        zIndex: '8',
        position: 'absolute',
        height: '100%',
        width: '100%'
      };
    }

  },
  updated: (el: ElType, binding) => {
    function setStyle(el: CSSStyleDeclaration, style: CSSStyleDeclaration) {
      el.position = style.position;
      el.left = style.left;
      el.top = style.top;
      el.zIndex = style.zIndex;
      el.height = style.height;
      el.width = style.width;
    }

    if (binding.value) {
      setStyle(el.style, el.$fullStyle);
    } else {
      setStyle(el.style, el.$oldStyle);
    }
  }
};
export default vFull;


